<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/mobileSelect.css">
	<link rel="stylesheet" href="css/DateTimePicker.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<title>订单支付页面</title>
	<style>
		body{
			background: rgb(229,229,229);
		}
		.container{
			margin-top: 5px;
			padding: 5px;
		}
	</style>
	<script>
		window.PointerEvent = void 0;
	</script>
</head>
<body>
	<header>
		<a href="javascript:void(0)" onclick="javascript:history.go(-1)" class="myleft"><i class=" glyphicon glyphicon-menu-left"></i>返回</a>
		<h3>订单支付</h3>
		<span class="myicon glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
	</header>
	<div class="container">
		<div class="payinfobox">
			<div class="payinfo-header">
				<div class="headerimg">
					<img src="images/head.jpg" alt="">
				</div>
				
				<div class="payheader-words">
					<p class="info-ke">高中数学课程服务</p>
					<p class="info-teacher">李老师 <span>￥<b class="myonemoney">300</b>/小时</span></p>
				</div>
			</div>
			<div class="payinfo-list">
				<ul>
					<li>
						<div class="listinfo-left">
							<p>购买课次</p>
						</div>
						<div class="listinfo-right">
							<p id="trigger1" class="timeandtimes">20</p>
							<span>次</span>
						</div>
					</li>
					<li>
						<div class="listinfo-left">
							<p>每次时长</p>
						</div>
						<div class="listinfo-right">
							<p id="trigger2" class="timeandtimes">1</p>
							<span>小时</span>
						</div>
					</li>
					<li>
						<div class="listinfo-left">
							<p>联系人姓名</p>
						</div>
						<div class="listinfo-right">
							<input type="text" placeholder="请输入联系人姓名">
						</div>
					</li>
					<li>
						<div class="listinfo-left">
							<p>联系电话</p>
						</div>
						<div class="listinfo-right">
							<input type="text" placeholder="请输入联系电话">
						</div>
					</li>
					<li>
						<div class="listinfo-left">
							<p>上课地址</p>
						</div>
						<div class="listinfo-right">
							<textarea name="" cols="30" rows="10" placeholder="选填" id="mytext"></textarea>
						</div>
					</li>
					<li>
						<div class="listinfo-left">
							<p>首次期望上课时间</p>
						</div>
						<div class="listinfo-right">
							<div class="timechoosebox">
								<input type="text" data-field="datetime" readonly="" placeholder="点击选择时间">
								<p class="thisistime">具体时间以线下与老师沟通为准</p>
							</div>
							
						</div>
					</li>
				</ul>
				<div class="paymoney">
					<p>共计<b class="myhouerall">20</b>小时</p>
					<p class="paytol">应付金额：<span>￥<b class="mymoneyall">6000</b>元</span></p>
				</div>
			</div>
			
		</div>
		<div class="ispay">
			<button class="payno">取消订单</button>
			<button class="payyes">支付</button>
		</div>
		<div class="ispay ispay-sure" style="display: block;">
			<button class="payyes">支付</button>
		</div>
	</div>

	<div id="dtBox"></div>
</body>
<script src="js/mobileSelect.js"></script>
<script src="js/jquery.js"></script>
<script src="js/DateTimePicker.js"></script>

<script>
	var houerArr=['1','5','10','20','50','100','200'];
	var timeArr=['1','2','3','4','5','8','10'];
	var mobileSelect1 = new MobileSelect({
	    trigger: '#trigger1',
	    title: '选择课次',
	    wheels: [
	                {data: houerArr}
	            ],
	    position:[2], //初始化定位 打开时默认选中的哪个 如果不填默认为0
	    transitionEnd:function(indexArr, data){
	        //console.log(data);
	    },
	    callback:function(indexArr, data){
	        console.log(data);
	    }
	});

	var mobileSelect1 = new MobileSelect({
	    trigger: '#trigger2',
	    title: '上课时长',
	    wheels: [
	                {data: timeArr}
	            ],
	    position:[2], //初始化定位 打开时默认选中的哪个 如果不填默认为0
	    transitionEnd:function(indexArr, data){
	        //console.log(data);
	    },
	    callback:function(indexArr, data){
	        console.log(data);
	    }
	});



	$(document).ready(function()
		{
			$("#dtBox").DateTimePicker({
			
				dateFormat: "MM-dd-yyyy",
				timeFormat: "HH:mm",
				dateTimeFormat: "yyyy-MM-dd HH:mm:ss"
			
			});
		});

	$('.ensure').on('click',function(){
		myhouer = $('#trigger1').html();
		mytime = $('#trigger2').html();
		mymoney = $('.myonemoney').html();
		$('.myhouerall').html(myhouer * mytime);
		$('.mymoneyall').html(myhouer * mytime * mymoney);
	})


	var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
        isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                        elem.addEventListener ?
                                elem.addEventListener(type, callback, false) :
                                elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                        var val = elem.currentStyle[name];
 
                        if (name === 'height' && val.search(/px/i) !== 1) {
                                var rect = elem.getBoundingClientRect();
                                return rect.bottom - rect.top -
                                        parseFloat(getStyle('paddingTop')) -
                                        parseFloat(getStyle('paddingBottom')) + 'px';        
                        };
 
                        return val;
                } : function (name) {
                                return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));
 
        elem.style.resize = 'none';
 
        var change = function () {
                var scrollTop, height,
                        padding = 0,
                        style = elem.style;
 
                if (elem._length === elem.value.length) return;
                elem._length = elem.value.length;
 
                if (!isFirefox && !isOpera) {
                        padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
                };
                scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 
                elem.style.height = minHeight + 'px';
                if (elem.scrollHeight > minHeight) {
                        if (maxHeight && elem.scrollHeight > maxHeight) {
                                height = maxHeight - padding;
                                style.overflowY = 'auto';
                        } else {
                                height = elem.scrollHeight - padding;
                                style.overflowY = 'hidden';
                        };
                        style.height = height + extra + 'px';
                        scrollTop += parseInt(style.height) - elem.currHeight;
                        document.body.scrollTop = scrollTop;
                        document.documentElement.scrollTop = scrollTop;
                        elem.currHeight = parseInt(style.height);
                };
        };
 
        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
	};

var mytext = document.getElementById('mytext');
autoTextarea(mytext);
</script>
</html>